<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">

    <div class="layui-card">
        <div class="layui-card-header">专辑列表</div>
        <div class="layui-card-body">
            <table id="ablumlist" lay-filter="ablumFilter"></table>
        </div>
    </div>

    <!--音乐上传对话框-->
    <div id="uploadDialog" style="display: none;padding: 20px">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>音乐上传</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                        <!--表单控件项：文件上传（歌曲文件）-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲文件:</label>
                            <button class="layui-btn layui-btn-normal" type="button" id="btnMusic">
                                <i class="layui-icon layui-icon-upload"></i>
                                选择文件
                            </button>
                            <!--播放器隐藏控件：获取总播放时长用-->
                            <audio src="" id="player" style="display: none"></audio>
                            <!--表单提交时提交歌曲总播放时长-->
                            <input type="hidden" name="duration" id="duration"/>
                        </div>
                        <!--歌曲的专辑选择控件-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲专辑:</label>
                            <div class="layui-input-block">
                                <select name="aid" id="aid">
                                    <option value="0">匿名</option>
                                </select>
                            </div>
                        </div>
                        <!--表单控件项：歌曲名-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲名:</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" name="name" id="musicname" lay-verify="required"
                                       lay-verType="tips" lay-reqText="请输入歌曲名称">
                            </div>
                        </div>
                        <!--表单控件项：歌曲风格流派-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">风格:</label>
                            <div class="layui-input-block">
                                <select name="style" id="style">
                                    <option value="流行">流行</option>
                                    <option value="摇滚">摇滚</option>
                                    <option value="民谣">民谣</option>
                                    <option value="Rap/Hip Hop">Rap/Hip Hop</option>
                                    <option value="pop">pop</option>
                                    <option value="电子">电子</option>
                                    <option value="轻音乐">轻音乐</option>
                                    <option value="爵士">爵士</option>
                                    <option value="R&B">R&B</option>
                                    <option value="乡村">乡村</option>
                                    <option value="中国风">中国风</option>
                                    <option value="说唱">说唱</option>
                                    <option value="古典">古典</option>
                                    <option value="世界音乐">世界音乐</option>
                                </select>
                            </div>
                        </div>
                        <!-- 歌词控件    -->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">歌词:</label>
                            <div class="layui-input-block">
                                <textarea name="lrc" class="layui-textarea" placeholder="请填写歌词内容"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<!--专辑详情对话框-->
<div id="details" style="display: none;padding: 20px">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="3">
                <img src="" id="ablumImg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="ablumname"></span></h2>
            </td>
        </tr>
        <tr>
            <td>歌手: <span id="singer"></span></td>
            <td>语种: <span id="language"></span></td>
        </tr>
        <tr>
            <td>唱片公司: <span id="company"></span></td>
            <td>发行时间: <span id="releasedate"></span></td>
        </tr>
    </table>
    <!-- 专辑详情表-->
    <table id="ablumDetails"></table>
</div>

<script src="../res/layui/layui.js"></script>
<script src="../js/music-player.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery', 'upload', 'element'], function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        var form = layui.form;
        //加载jquery对象
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;
        //获取element模块（用于操作标签页）
        var element = layui.element;
        
        //渲染专辑列表表格
        table.render({
            elem: '#ablumlist',
            url: '/album/list',
            page: true,
            cols: [[
                {field: 'id', title: '专辑ID', width: 80},
                {field: 'name', title: '专辑名称', minWidth: 180},
                {field: 'singer', title: '歌手', width: 120},
                {field: 'language', title: '语种', width: 100},
                {field: 'company', title: '唱片公司', minWidth: 150},
                {field: 'releaseDate', title: '发行时间', width: 120},
                {field: 'musicCount', title: '歌曲数量', width: 100},
                {title: '操作', width: 220, templet: '#rowTools', fixed: 'right'}
            ]]
        });
        
        //对上传文件按钮绑定上传操作
        upload.render({
            elem:'#btnMusic', //触发上传的元素（使用css选择器）
            url: '/file/upload',  //上传接口
            accept: 'audio',  //设置允许上传的文件类型：音频
            choose:function(obj){ // 选择文件后触发
                //预览文件
                obj.preview(function(index,file){
                    //获取文件名
                    var filename = file.name;
                    //将文件名写入歌曲名输入框
                    $('#musicname').val(filename);
                })
            },
            done:function(resp){ //上传成功的回调
                if(resp.code === 0){
                   //将服务端返回的文件地址写入url隐藏控件中
                    if(!$('#url').length) {
                        $('#formMusic').append('<input type="hidden" id="url" name="url">');
                    }
                    $('#url').val(resp.data);
                    //将歌曲的播放地址设置给audio控件
                    $('#player').attr('src',resp.data);
                    //为播放器绑定第一帧加载事件
                    $('#player').on('loadeddata',function () {
                        //获取当前播放器所表示歌曲的总播放时长（秒）
                        let duration = Math.floor(this.duration)
                        //将总播放时长写入duration隐藏控件中
                        $('#duration').val(duration)
                    })
                }
            }
        })
        
        //绑定表单提交事件
        form.on('submit(addMusic)',function (data) {
            //获取表单数据
            let music = data.field
            //发送请求到服务端
            $.ajax({
                type:'post',   //请求方式
                url:'/music/add',   //请求地址
                data:JSON.stringify(music),    //请求参数
                contentType:'application/json;charset=utf-8',   //设置请求参数的格式,以json格式提交
                success:function(resp){  //响应成功之后的回调
                    if(resp.code === 0){
                        //提示信息
                        layer.msg('音乐上传成功',{icon:1,time:1000})
                        //关闭弹窗
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }, 1500);
                    }else{
                        //提示信息
                        layer.msg(resp.msg || '音乐上传失败',{icon:2,time:1000})
                    }
                }
            })
            //阻止原生提交事件
            return false;
        })
        
        //监听表格工具栏事件
        table.on('tool(ablumFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'details') {
                //查看详情
                layer.open({
                    type: 1,
                    title: '专辑详情',
                    content: $('#details'),
                    area: ['800px', '500px']
                });
                //填充详情数据
                $('#ablumImg').attr('src', data.coverImg || '../res/img/default_cover.jpg');
                $('#ablumname').text(data.name);
                $('#singer').text(data.singer);
                $('#language').text(data.language);
                $('#company').text(data.company);
                $('#releasedate').text(data.releaseDate);
                
                //加载专辑详情中的歌曲列表
                table.render({
                    elem: '#ablumDetails',
                    url: '/album/getMusicList?albumId=' + data.id,
                    cols: [[
                        {field: 'id', title: 'ID', width: 80},
                        {field: 'name', title: '歌曲名称', minWidth: 200},
                        {field: 'singer', title: '歌手', width: 120},
                        {field: 'duration', title: '时长', width: 80, templet: function(d) {
                            //格式化时长
                            var minutes = Math.floor(d.duration / 60);
                            var seconds = d.duration % 60;
                            return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
                        }},
                        {title: '播放', width: 80, templet: '#playButton'},
                        {title: '操作', width: 80, templet: function(d) {
                            return '<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs" onclick="removeMusicFromAlbum(' + d.id + ',' + data.id + ')">移除</a>';
                        }}
                    ]]
                });
            } else if (obj.event === 'upload') {
                //从歌曲库选择音乐添加到专辑
                layer.open({
                    type: 2,
                    title: '从歌曲库选择音乐',
                    content: 'select-music.html?type=album&id=' + data.id,
                    area: ['800px', '600px'],
                    success: function(layero, index) {
                        // 保存当前弹窗索引，以便选择完成后关闭
                        window.currentSelectMusicIndex = index;
                    }
                });
            } else if (obj.event === 'edit') {
                //编辑操作 - 直接打开一个iframe层
                layer.open({
                    type: 2, // iframe类型
                    title: data.name + '-编辑',
                    content: 'ablum-add.html?id=' + data.id,
                    area: ['80%', '90%'], // 设置窗口大小
                    maxmin: true, // 允许最大最小化
                    success: function(layero, index) {
                        console.log('编辑窗口已打开');
                    }
                });
            } else if (obj.event === 'del') {
                //删除操作
                layer.confirm('确定要删除这个专辑吗？', function(index) {
                    $.get('/album/delete', {id: data.id}, function(resp) {
                        if (resp.code === 0) {
                            layer.msg('删除成功', {icon: 1});
                            obj.del();
                        } else {
                            layer.msg(resp.msg || '删除失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    })

</script>
    
    <script>
    // 从专辑中移除歌曲
    function removeMusicFromAlbum(musicId, albumId) {
        layer.confirm('确定要从专辑中移除这首歌曲吗？', function(index) {
            $.ajax({
                type: 'post',
                url: '/music/updateAlbum',
                data: {id: musicId, aid: 0}, // 设置为0表示移出专辑
                success: function(resp) {
                    if (resp.code === 0) {
                        layer.msg('移除成功', {icon: 1});
                        // 重新加载歌曲列表
                        layui.table.render({
                            elem: '#ablumDetails',
                            url: '/album/getMusicList?albumId=' + albumId,
                            cols: [[
                                {field: 'id', title: 'ID', width: 80},
                                {field: 'name', title: '歌曲名称', minWidth: 200},
                                {field: 'singer', title: '歌手', width: 120},
                                {field: 'duration', title: '时长', width: 80, templet: function(d) {
                                    //格式化时长
                                    var minutes = Math.floor(d.duration / 60);
                                    var seconds = d.duration % 60;
                                    return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
                                }},
                                {title: '播放', width: 80, templet: '#playButton'},
                                {title: '操作', width: 80, templet: function(d) {
                                    return '<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-xs" onclick="removeMusicFromAlbum(' + d.id + ',' + albumId + ')">移除</a>';
                                }}
                            ]]
                        });
                    } else {
                        layer.msg(resp.msg || '移除失败', {icon: 2});
                    }
                }
            });
            layer.close(index);
        });
    }
    </script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="upload">
            <i class="layui-icon layui-icon-upload"></i>
            上传音乐
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


<!--播放按钮模板-->
<script id="playButton" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0" data-src="{{d.url || d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>

<script>
    //监听专辑详情中歌曲列表的播放按钮点击事件
    layui.use(['table', 'jquery'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        
        //监听表格工具事件
        table.on('tool(ablumDetails)', function(obj) {
            var data = obj.data;
            if (obj.event === 'playOrPause') {
                // 处理播放按钮点击事件
                if (window.MusicPlayer) {
                    // 创建音乐数据对象
                    var musicData = {
                        name: data.name,
                        singer: data.singer,
                        url: data.url || data.path
                    };
                    
                    // 获取当前专辑详情页面的所有音乐数据作为播放列表
                    var musicTable = table.cache['ablumDetails'] || [];
                    var playList = musicTable.map(function(item) {
                        return {
                            name: item.name,
                            singer: item.singer,
                            url: item.url || item.path
                        };
                    });
                    
                    // 调用MusicPlayer播放音乐并设置播放列表
                    MusicPlayer.play(musicData, playList);
                    
                    // 更新按钮状态
                    var button = $(this);
                    var isPlaying = button.attr('data-playing') === '1';
                    if (isPlaying) {
                        button.attr('data-playing', '0');
                        button.find('i').removeClass('layui-icon-pause').addClass('layui-icon-play');
                        MusicPlayer.togglePlayPause();
                    } else {
                        button.attr('data-playing', '1');
                        button.find('i').removeClass('layui-icon-play').addClass('layui-icon-pause');
                    }
                }
                
                // 确保所有播放按钮状态正确更新
                setTimeout(() => {
                    if (window.MusicPlayer && window.MusicPlayer.updateTableButtons) {
                        window.MusicPlayer.updateTableButtons();
                    }
                }, 100);
            }
        });
        
        // 当页面加载完成后，更新播放按钮状态
        $(function() {
            // 确保播放器已初始化
            if (window.MusicPlayer && window.MusicPlayer.updateTableButtons) {
                // 延迟执行以确保播放器完全加载
                setTimeout(() => {
                    window.MusicPlayer.updateTableButtons();
                }, 500);
            }
        });
    });
</script>
</body>
</html>